Subscribe Web · Test Scenarios
+ Playwright Automation Guide

01บทนำ · About This Guide

Test scope · deliverables · references

เอกสารนี้เป็น Test Documentation สำหรับหน้าจอ Subscribe Web v2.0 ครอบคลุม:

• Test Scenarios · 14 test areas — ครอบคลุมทุก flow ของ 6-step wizard
• Test Cases · 72 cases — Positive / Negative / Boundary / UI / Integration / A11y
• Playwright Automation Guide — POM · fixtures · sample scripts · CI
• Payment integration coverage — Omise · SlipOK · Bank Transfer · Trial lock

02Screen Overview

6-step wizard · 4 packages · 3 payment methods · TH/EN · font size

🗺️ Wizard Structure

💎 4 Packages

💳 3 Payment Methods

• Credit Card — via Omise gateway · 4-field form (card number, name, expiry, CVC)
• PromptPay QR — QR code + slip upload · auto-verify via SlipOK ~30 sec
• Bank Transfer — Kasikorn Bank info + slip upload · manual verification 1 business hour

🎨 Additional UI Features

• Font size toggle — A- / A / A+ (13/15/17 px base)
• Language toggle — TH 🇹🇭 / EN 🇬🇧 · updates all labels + T&C content
• Brand mini header — ConstructQ logo · standalone page (no AppShell)
• Vertical stepper — left side · click-to-jump navigation

03Test Strategy

Test types · priority · risk-based approach

🎯 Test Types

⚡ Priority

• P1 — Critical · payment · save · signup completion · data integrity
• P2 — High · validation · UX · Trial lock behavior
• P3 — Medium · UI polish · edge cases · font size · translations

🌐 Environments

• Dev/Staging: Omise TEST keys · SlipOK sandbox · MailHog for email capture
• UAT: Real Omise TEST · real Kasikorn PromptPay test QR · staging DB
• Production: Smoke only · no real charges · use test card 4242 4242 4242 4242

04Test Scenarios + Test Cases

14 areas · 72 detailed test cases

4.1 · 🏠 Landing + Navigation

4.2 · 📜 Step 01 · Terms & Conditions

4.3 · 💎 Step 02 · Choose Package

4.4 · 🏢 Step 03 · Company Details

4.5 · 👥 Step 04 · Users + Roles

4.6 · 💳 Step 05 · Payment

4.7 · 🎉 Step 06 · Welcome

4.8 · 🔒 Trial Lock Behavior

4.9 · 🌐 Language Toggle TH/EN

4.10 · 🔤 Font Size

4.11 · 🔐 Permission Matrix (view-only)

4.12 · 🔌 Payment Integration (mock)

4.13 · 📱 Responsive

4.14 · ♿ Accessibility

05Playwright Automation Guide

Setup · POM · fixtures · sample tests · CI/CD

🚀 Setup

1. Install: npm init playwright@latest · TypeScript · Chromium+Firefox+WebKit
2. Structure: tests/subscribe/, pages/, fixtures/, mocks/
3. Omise TEST mode: set OMISE_PUBLIC_KEY=pkey_test_xxx · use test cards
4. SlipOK mock: intercept /api/slipok/verify · return canned success/fail
5. Email capture: MailHog local · http://localhost:8025 API to read messages

📁 Project Structure

treetests/subscribe/
├── step01-terms.spec.ts
├── step02-package.spec.ts
├── step03-company.spec.ts
├── step04-users.spec.ts
├── step05-payment.spec.ts
├── step06-welcome.spec.ts
├── trial-lock.spec.ts
├── language.spec.ts
├── payment-integration.spec.ts
├── a11y.spec.ts
└── e2e-full-flow.spec.ts
pages/
├── SubscribePage.ts        # Main POM
├── StepPackage.ts
├── StepCompany.ts
├── StepUsers.ts
├── StepPayment.ts
└── StepWelcome.ts
fixtures/
├── companies.json
├── users.json
└── test-cards.json
mocks/
├── omise.mock.ts
├── slipok.mock.ts
└── tambon.mock.ts
playwright.config.ts

🎯 SubscribePage POM

TypeScriptimport { Page, Locator, expect } from '@playwright/test';

export class SubscribePage {
  readonly page: Page;
  readonly stepperItems: Locator;
  readonly btnNext: Locator;
  readonly btnBack: Locator;
  readonly langTh: Locator;
  readonly langEn: Locator;

  constructor(page: Page) {
    this.page = page;
    this.stepperItems = page.locator('.sub-step');
    this.btnNext = page.getByRole('button', { name: /ถัดไป|Next/ });
    this.btnBack = page.getByRole('button', { name: /ย้อนกลับ|Back/ });
    this.langTh = page.locator('[data-lang="th"]');
    this.langEn = page.locator('[data-lang="en"]');
  }

  async goto() { await this.page.goto('/subscribe'); }

  async acceptTerms() {
    await this.page.getByLabel(/ยอมรับข้อกำหนดและเงื่อนไข/).check();
    await this.page.getByLabel(/ยอมรับ.*PDPA/).check();
    await this.btnNext.click();
  }

  async selectPackage(id: 'trial' | 'starter' | 'pro' | 'enterprise') {
    await this.page.locator(`[data-package="${id}"]`).click();
    await this.btnNext.click();
  }

  async setCycle(cycle: 'monthly' | 'yearly') {
    await this.page.locator(`.sub-cycle-toggle button[data-cycle="${cycle}"]`).click();
  }

  async fillCompany(data: {
    name: string; taxId: string;
    contactName: string; contactEmail: string; contactPhone: string;
    tambon: string;
  }) {
    const p = this.page;
    await p.getByLabel(/ชื่อบริษัท/).fill(data.name);
    await p.getByLabel(/เลขประจำตัวผู้เสียภาษี/).fill(data.taxId);
    await p.getByLabel(/ชื่อผู้ติดต่อ/).fill(data.contactName);
    await p.getByLabel(/อีเมลผู้ติดต่อ/).fill(data.contactEmail);
    await p.getByLabel(/เบอร์โทรผู้ติดต่อ/).fill(data.contactPhone);
    await p.getByLabel(/ตำบล/).fill(data.tambon);
    await p.locator('.sub-drop-item').first().click();  // pick 1st autocomplete
    await this.btnNext.click();
  }

  async addUser(u: { name: string; email: string; phone: string; password: string; role: string; }) {
    await this.page.getByRole('button', { name: /เพิ่มผู้ใช้งาน/ }).click();
    const last = this.page.locator('.sub-user-row').last();
    await last.getByLabel(/ชื่อ-นามสกุล/).fill(u.name);
    await last.getByLabel(/อีเมล/).fill(u.email);
    await last.getByLabel(/เบอร์โทร/).fill(u.phone);
    await last.getByLabel(/รหัสผ่าน/).fill(u.password);
    await last.getByLabel(/บทบาท/).selectOption(u.role);
  }

  async payWithCard(card: { number: string; name: string; exp: string; cvc: string; }) {
    const p = this.page;
    await p.getByRole('tab', { name: /บัตรเครดิต/ }).click();
    await p.getByLabel(/เลขบัตร/).fill(card.number);
    await p.getByLabel(/ชื่อบนบัตร/).fill(card.name);
    await p.getByLabel(/วันหมดอายุ/).fill(card.exp);
    await p.getByLabel(/CVC/).fill(card.cvc);
    await p.getByRole('button', { name: /ชำระเงิน|Pay/ }).click();
  }
}

✅ Sample Test · E2E Full Flow (Starter Monthly · Credit Card)

TypeScriptimport { test, expect } from '@playwright/test';
import { SubscribePage } from '../pages/SubscribePage';

test.describe('Subscribe · E2E', () => {
  test('TC-E2E-01 · Starter monthly + credit card · complete signup', async ({ page }) => {
    const sub = new SubscribePage(page);
    await sub.goto();

    // Step 01
    await sub.acceptTerms();

    // Step 02
    await sub.setCycle('monthly');
    await sub.selectPackage('starter');

    // Step 03
    await sub.fillCompany({
      name: 'บ.ธาร์ณัส จำกัด',
      taxId: '0105561234567',
      contactName: 'สมชาย ใจดี',
      contactEmail: 'somchai@tarnas.co.th',
      contactPhone: '0812345678',
      tambon: 'ห้วยขวาง'
    });

    // Step 04
    await sub.addUser({
      name: 'สมชาย ใจดี', email: 'somchai@tarnas.co.th',
      phone: '0812345678', password: 'Str0ng!Pass', role: 'pm'
    });
    await page.getByRole('button', { name: /ถัดไป/ }).click();

    // Step 05 · Payment
    await sub.payWithCard({
      number: '4242424242424242', name: 'SOMCHAI JAIDEE',
      exp: '12/28', cvc: '123'
    });

    // Wait for Welcome
    await expect(page.getByText(/ขอแสดงความยินดี/)).toBeVisible({ timeout: 15000 });
    await expect(page.getByText(/order.*ref/i)).toBeVisible();
  });

  test('TC-62 · Trial lock · duration stepper disabled', async ({ page }) => {
    const sub = new SubscribePage(page);
    await sub.goto();
    await sub.acceptTerms();
    await sub.selectPackage('trial');
    await page.locator('.sub-step:nth-child(5)').click();
    await expect(page.locator('.sub-duration-stepper-lg.is-locked')).toBeVisible();
    await expect(page.locator('.sub-duration-stepper-lg .btn').first()).toBeDisabled();
  });

  test('TC-21 · Tax ID must be 13 digits', async ({ page }) => {
    const sub = new SubscribePage(page);
    await sub.goto();
    await sub.acceptTerms();
    await sub.selectPackage('starter');
    await page.getByLabel(/เลขประจำตัวผู้เสียภาษี/).fill('12345');
    await page.getByRole('button', { name: /ถัดไป/ }).click();
    await expect(page.getByText(/13 หลัก/)).toBeVisible();
  });

  test('TC-65 · TH → EN language toggle', async ({ page }) => {
    const sub = new SubscribePage(page);
    await sub.goto();
    await expect(page.getByText('ข้อกำหนดและเงื่อนไข')).toBeVisible();
    await sub.langEn.click();
    await expect(page.getByText('Terms & Conditions')).toBeVisible();
  });
});

🎭 Mock Setup · Omise + SlipOK

TypeScript · Route Interception// mocks/omise.mock.ts
export async function mockOmise(page: Page) {
  await page.route('**/api.omise.co/**', async route => {
    const body = route.request().postDataJSON();
    if (body?.card?.number?.startsWith('4242')) {
      await route.fulfill({ status: 200, json: {
        id: 'chrg_test_success', status: 'successful', paid: true
      }});
    } else if (body?.card?.number?.startsWith('4000')) {
      await route.fulfill({ status: 400, json: {
        object: 'error', code: 'card_declined', message: 'The card was declined.'
      }});
    }
  });
}

// mocks/slipok.mock.ts
export async function mockSlipOk(page: Page, expectAmount: number) {
  await page.route('**/api/slipok/verify', async route => {
    const body = route.request().postDataJSON();
    if (body.amount === expectAmount) {
      await route.fulfill({ status: 200, json: {
        verified: true, amount: expectAmount, ref: 'SLIP-OK-TEST'
      }});
    } else {
      await route.fulfill({ status: 400, json: {
        verified: false, reason: 'amount_mismatch'
      }});
    }
  });
}

06Appendix

📌 Version History

• ConstructQ_Subscribe.html · source · standalone page · 6-step wizard
• v1.0 · earlier release (task #117)
• v2.0 · 13 ก.ค. 2569 · Refresh · 72 test cases · 14 areas · restructured · added Trial-lock + Font size + Permission Matrix + Integration coverage

🔗 References

• Playwright Docs: https://playwright.dev
• Omise Docs: https://www.omise.co/docs
• SlipOK Docs: https://slipok.com/documents
• Test cards (Omise): 4242 4242 4242 4242 (success), 4000 0000 0000 0002 (declined)
• MailHog: https://github.com/mailhog/MailHog

📊 Excel Companion

ดูไฟล์ ConstructQ_Subscribe_TestCases_v2.0.xlsx คู่กัน · 4 sheets: Summary · Test Scenarios · Test Cases · Playwright Coverage